<template>
  <div class="box">
    <div class="right">
      <echartsChart ref="chartRef" :boxShadow="false" :options="chartOptions" :dark="dark" />
    </div>
    <div class="left">
      <div v-for="(item, index) in categroyList" :key="index" :class="`item item-${index} ${dark ? 'dark' : ''}`">
        <div class="name">{{ item.name }}</div>
        <div class="num">
          <span
            class="undo"
            :class="{ active: item.activeStatus == 'UNDO', diabled: valueIsEmpty(item?.undoTasks) }"
            @click="() => changeParams('UNDO', index, valueIsEmpty(item?.undoTasks))"
            >{{ valueIsEmpty(item?.undoTasks) ? "--" : item?.undoTasks }}</span
          >
          <span
            class="total"
            :class="{ active: item.activeStatus == 'ALL', diabled: valueIsEmpty(item?.totalTasks) }"
            @click="() => changeParams('ALL', index, valueIsEmpty(item?.totalTasks))"
            >/{{ valueIsEmpty(item?.totalTasks) ? "--" : item?.totalTasks }}</span
          >
          <span class="text">项</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, watch, ref } from "vue";
import echartsChart from "@/views/common/components/echartsChart/index.vue";
const props = defineProps({
  categroyList: {
    type: Array,
    default: () => []
  },
  countData: {
    type: Object,
    default: () => {}
  },
  taskStatus: {
    type: String,
    default: ""
  },
  dark: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(["paramsChange"]);
const chartRef = ref();
const chartOptions = ref(null);
const changeParams = (type, index, disabled) => {
  if (props.dark || disabled) {
    return;
  }
  emits("paramsChange", {
    type,
    index
  });
};
const valueIsEmpty = value => {
  if (value === "" || value == null || typeof value == "undefined") {
    return true;
  }
  return false;
};
const initChart = async () => {
  if (valueIsEmpty(props.countData.totalNum)) {
    return;
  }
  const ec = await chartRef.value.getEcharts();
  if (!ec) return null;
  const { getWidth = null } = ec;
  const labelLayout = function (params) {
    if (!getWidth) return null;
    const isLeft = params.labelRect.x < getWidth() / 2;
    const points = params.labelLinePoints;
    points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
    return { labelLinePoints: points };
  };
  if (!props.dark) {
    ec?.getInstance()?.off("click");
    ec?.getInstance()?.on("click", params => {
      console.log("params?.name:", params?.name);
      if (params?.name == "已完成") {
        emits("paramsChange", {
          type: "DONE",
          index: -1
        });
      }
      if (params?.name == "未完成") {
        emits("paramsChange", {
          type: "UNDO",
          index: -1
        });
      }
      // if (params?.name) {
      //   const path = "/all/equip/runManage/status";
      //   const eqpRunStatus = deviceStatusMap.value.get(params.name).value;
      //   const query = { eqpRunStatus, className: CLASSNAME };
      //   router.push({ path, query });
      // }
    });
  }
  let dataList = [];
  if (props.taskStatus == "" || props.taskStatus == "UNDO") {
    dataList.push({
      name: "未完成",
      value: props.countData.undoNum,
      itemStyle: {
        color: "#FF0844"
      }
    });
  }

  if (props.taskStatus == "" || props.taskStatus == "DONE") {
    dataList.push({
      name: "已完成",
      value: props.countData.doneNum,
      itemStyle: {
        color: "#36CB7A"
      }
    });
  }
  chartOptions.value = {
    backgroundColor: props.dark ? "#001e3b" : "#ffffff",
    title: {
      text: "{a|" + props.countData.totalNum + "}{b|项}",
      left: "center",
      top: "center",
      textStyle: {
        rich: {
          a: {
            fontSize: 28,
            fontWeight: "bold",
            color: props.dark ? "#00C2FF" : "#2885F7"
          },
          b: {
            fontSize: 14,
            color: props.dark ? "#ffffff" : "#363636",
            lineHeight: 20
          }
        }
      }
    },
    tooltip: {
      trigger: "item",
      formatter: function (params) {
        const { marker, name, value, percent } = params;
        const d = `${marker}${name}：  ${value}（${percent}%）`;
        return d;
      }
    },
    grid: {
      left: 0,
      right: 0,
      top: "5%",
      bottom: "5%",
      containLabel: true
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: ["40%", "60%"], // [30,40]
        center: ["50%", "50%"],
        label: {
          alignTo: "edge",
          formatter: `{name|{b}}{percent| ( {d}% )}\n{num|{c}项}`,
          minMargin: 2,
          edgeDistance: 10,
          lineHeight: 20,
          rich: {
            num: {
              fontSize: 12,
              color: props.dark ? "#fff" : "#000",
              lineHeight: 20,
              fontWeight: 600,
              height: 40
            },
            percent: {
              fontSize: 12,
              color: props.dark ? "#fff" : "#000",
              lineHeight: 20
            }
          }
        },
        labelLine: {
          length: props.dark ? 8 : 15,
          length2: 0,
          maxSurfaceAngle: 80
        },
        labelLayout,
        data: dataList,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };
  chartRef.value.updateEchartsOption();
};
watch(
  () => props.countData,
  () => {
    initChart();
  },
  {
    immediate: true,
    deep: true
  }
);
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  height: 100%;
  padding-top: 10px;

  .left {
    display: flex;
    flex: 0 0 73%;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: right;
    height: 100%;

    .item {
      box-sizing: border-box;
      display: flex;
      flex: 0 0 23%; /* 每个项目占25%的宽度 */
      flex-direction: column;
      // width: 286px;
      height: 68px;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 4px;

      .name {
        color: #000;
      }

      .num {
        font-size: 24px;

        .undo {
          position: relative;
          color: #f45252;
          cursor: pointer;

          &.diabled {
            cursor: not-allowed;
          }

          &.active::after {
            position: absolute;
            bottom: -5px;
            left: calc(50% - 4px);
            width: 0;
            height: 0;
            text-align: center;
            content: "";
            border-right: 4px solid transparent;
            border-bottom: 8px solid #f45252;
            border-left: 4px solid transparent;
          }
        }

        .total {
          position: relative;
          color: #2885f7;
          cursor: pointer;

          &.diabled {
            cursor: not-allowed;
          }

          &.active::after {
            position: absolute;
            bottom: -5px;
            left: 50%;
            width: 0;
            height: 0;
            text-align: center;
            content: "";
            border-right: 4px solid transparent;
            border-bottom: 8px solid #2885f7;
            border-left: 4px solid transparent;
          }
        }

        .text {
          font-size: 14px;
          font-weight: normal;
          color: #363636;
        }
      }

      &.item-0 {
        background: #fff5e5 url("@/assets/images/electricity/task-icon-0.png") no-repeat;
        background-position: calc(100% - 8px) center;
        background-size: 48px 48px;
      }

      &.item-1 {
        background: #eff6ff url("@/assets/images/electricity/task-icon-1.png") no-repeat;
        background-position: calc(100% - 8px) center;
        background-size: 48px 48px;
      }

      &.item-2 {
        background: #e6fbf8 url("@/assets/images/electricity/task-icon-2.png") no-repeat;
        background-position: calc(100% - 8px) center;
        background-size: 48px 48px;
      }

      &.item-3 {
        background: #fee url("@/assets/images/electricity/task-icon-3.png") no-repeat;
        background-position: calc(100% - 8px) center;
        background-size: 48px 48px;
      }

      &.item-4 {
        background: #f6f6f6 url("@/assets/images/electricity/task-icon-4.png") no-repeat;
        background-position: calc(100% - 8px) center;
        background-size: 48px 48px;
      }

      &.item-5 {
        background: #fee url("@/assets/images/electricity/task-icon-5.png") no-repeat;
        background-position: calc(100% - 8px) center;
        background-size: 48px 48px;
      }

      &.item-6 {
        background: #eff6ff url("@/assets/images/electricity/task-icon-6.png") no-repeat;
        background-position: calc(100% - 8px) center;
        background-size: 48px 48px;
      }

      &.item-7 {
        background: #e6fbf8 url("@/assets/images/electricity/task-icon-7.png") no-repeat;
        background-position: calc(100% - 8px) center;
        background-size: 48px 48px;
      }

      &.dark {
        .name {
          color: #fff;
        }

        .num {
          .undo {
            color: #ff0844;
          }

          .total {
            color: #00c2ff;
          }

          .text {
            color: #fff;
          }
        }

        &.item-0 {
          background: url("@/assets/images/electricity/task-icon-0-dark.png"), linear-gradient(to right, #0e263c, #133656);
          background-repeat: no-repeat;
          background-position:
            calc(100% - 8px) center,
            center;
          background-size:
            48px 48px,
            contain;
        }

        &.item-1 {
          background: url("@/assets/images/electricity/task-icon-1-dark.png"), linear-gradient(to right, #0e263c, #133656);
          background-repeat: no-repeat;
          background-position:
            calc(100% - 8px) center,
            center;
          background-size:
            48px 48px,
            contain;
        }

        &.item-2 {
          background: url("@/assets/images/electricity/task-icon-2-dark.png"), linear-gradient(to right, #0e263c, #133656);
          background-repeat: no-repeat;
          background-position:
            calc(100% - 8px) center,
            center;
          background-size:
            48px 48px,
            contain;
        }

        &.item-3 {
          background: url("@/assets/images/electricity/task-icon-3-dark.png"), linear-gradient(to right, #0e263c, #133656);
          background-repeat: no-repeat;
          background-position:
            calc(100% - 8px) center,
            center;
          background-size:
            48px 48px,
            contain;
        }

        &.item-4 {
          background: url("@/assets/images/electricity/task-icon-4-dark.png"), linear-gradient(to right, #0e263c, #133656);
          background-repeat: no-repeat;
          background-position:
            calc(100% - 8px) center,
            center;
          background-size:
            48px 48px,
            contain;
        }

        &.item-5 {
          background: url("@/assets/images/electricity/task-icon-5-dark.png"), linear-gradient(to right, #0e263c, #133656);
          background-repeat: no-repeat;
          background-position:
            calc(100% - 8px) center,
            center;
          background-size:
            48px 48px,
            contain;
        }

        &.item-6 {
          background: url("@/assets/images/electricity/task-icon-6-dark.png"), linear-gradient(to right, #0e263c, #133656);
          background-repeat: no-repeat;
          background-position:
            calc(100% - 8px) center,
            center;
          background-size:
            48px 48px,
            contain;
        }

        &.item-7 {
          background: url("@/assets/images/electricity/task-icon-7-dark.png"), linear-gradient(to right, #0e263c, #133656);
          background-repeat: no-repeat;
          background-position:
            calc(100% - 8px) center,
            center;
          background-size:
            48px 48px,
            contain;
        }
      }
    }
  }

  .right {
    flex: 1;
    height: 100%;
  }
}

:deep(.echarts-chart-dark) {
  background: transparent;
}
</style>
